<!-- 领券专区 -->
<template>
    <div class='coupon'>
      <van-nav-bar title="领券" fixed left-arrow class="orderNav" @click-left="onClickLeft"/>

			<van-tabs swipeable  tab-active-class="active" custom-class="tabs" sticky :active="active">
				<van-tab title="全部">
					<div class="couponList">
						<div class="couponBox">
							<div class="left">
								<span>1000</span>
								<p>满1999元可用</p>
							</div>
							<div class="right">
								<span>使用时间： 12/12-12/31</span>
								<p>苏泊尔晶韵系列两件套···</p>
								<button>立即领取</button>
							</div>
						</div>
						<div class="couponBox">
							<div class="left">
								<span>1000</span>
								<p>满1999元可用</p>
							</div>
							<div class="right">
								<span>使用时间： 12/12-12/31</span>
								<p>苏泊尔晶韵系列两件套···</p>
								<button>立即领取</button>
							</div>
						</div>
						<div class="couponBox">
							<div class="left">
								<span>1000</span>
								<p>满1999元可用</p>
							</div>
							<div class="right">
								<span>使用时间： 12/12-12/31</span>
								<p>苏泊尔晶韵系列两件套···</p>
								<button>立即领取</button>
							</div>
						</div>
						<div class="couponBox">
							<div class="left">
								<span>1000</span>
								<p>满1999元可用</p>
							</div>
							<div class="right">
								<span>使用时间： 12/12-12/31</span>
								<p>苏泊尔晶韵系列两件套···</p>
								<button>立即领取</button>
							</div>
						</div>
						<div class="couponBox">
							<div class="left">
								<span>1000</span>
								<p>满1999元可用</p>
							</div>
							<div class="right">
								<span>使用时间： 12/12-12/31</span>
								<p>苏泊尔晶韵系列两件套···</p>
								<button>立即领取</button>
							</div>
						</div>
						<div class="couponBox">
							<div class="left">
								<span>1000</span>
								<p>满1999元可用</p>
							</div>
							<div class="right">
								<span>使用时间： 12/12-12/31</span>
								<p>苏泊尔晶韵系列两件套···</p>
								<button>立即领取</button>
							</div>
						</div>
						<div class="couponBox">
							<div class="left">
								<span>1000</span>
								<p>满1999元可用</p>
							</div>
							<div class="right">
								<span>使用时间： 12/12-12/31</span>
								<p>苏泊尔晶韵系列两件套···</p>
								<button>立即领取</button>
							</div>
						</div>
					</div>
				</van-tab>
				<van-tab title="自营">
					<div class="couponList">
						
					</div>
				</van-tab>
				<van-tab title="淘宝">
					<div class="couponList">
						
					</div>
				</van-tab>
				<van-tab title="京东">
					<div class="couponList">
						
					</div>
				</van-tab>
      </van-tabs>
    </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
			active:0
		};
  },
  mounted() {},
  methods: {
    onClickLeft() {
      uni.navigateBack()
    },
  },
}
</script>
<style lang='less'>
.coupon{
	background: #F7F7F7;
	min-height: 100vh;
	
	box-sizing: border-box;
}
	
.tabs{
	.van-tabs__line{background: #f2e262;}
	.van-tabs__wrap {
		height: 88upx;
		top: 120upx !important;
		&::after{border-bottom: none}
	}
	.active{
		color: #616161;
		font-weight: bold;
	}
}

.couponList{
	width: 100%;
	padding-bottom: 20upx;
	margin-top: 20upx;
	padding-top: 120upx;
	.couponBox{
		margin: 0 30upx;
		background: url('~@/static/coupon/01.png');
		background-size: 100% 100%;
		width: 690upx;
		height: 208upx;
		color: #fff;
		display: inline-block;
		.left{
			float: left;
			width: 220upx;
			text-align: center;
			span{
				font-size: 76upx;
				font-weight: bold;
				margin-top: 20upx;
				width: 100%;
				display: inline-block;
			}
			p{
				font-size: 20upx;
				margin-top: 20upx;
			}
		}
		.right{
			float: left;
			width: 470upx;
			text-align: center;
			span{
				color: #FF7433;
				font-size: 21upx;
				line-height: 45upx;
			}
			p{
				color: #333;
				font-size: 31upx;
			}
			button{
				background: url('~@/static/coupon/2.png');
				background-size: 100% 100%;
				width: 180upx;
				height: 89upx;
				line-height: 89upx;
				font-size: 27upx;
				color: #fff;
			}
		}
	}
}
</style>